Language

Everyone who installs your Widget can pick a language for their Frame in its Frame Settings. Your Widget's dates and numbers are written in that language for you, and the usePreferredLanguage hook from the Blotch Library tells your Widget which one it is, so it can show its own words in it too.

import { usePreferredLanguage } from "~lib/use-preferred-language";

const Widget = () => {
  const language = usePreferredLanguage();

  return <div>{language}</div>;
};

language is one of "en", "fr", "de", "it", "es" or "ja". A Frame left on Automatic, and the Widget Designer preview, give you "en".

Dates and numbers

Dates and numbers need nothing from you. Leave the language out of toLocaleDateString, toLocaleString or any Intl formatter, and they write in the Frame's language. When you pass options, put undefined where the language would go:

import { useScheduledDate } from "~lib/use-scheduled-date";

const Widget = () => {
  const scheduledDate = useScheduledDate();

  return (
    <div>
      {scheduledDate.toLocaleDateString(undefined, {
        weekday: "long",
        day: "numeric",
        month: "long",
      })}
    </div>
  );
};

Name a language, such as "en-GB", only when you want that one on every Frame.

Your own words

Keep a translation of each piece of text your Widget shows, and fall back to English for a language you have not translated:

import { usePreferredLanguage } from "~lib/use-preferred-language";

const GREETINGS: Record<string, string> = {
  en: "Good morning",
  fr: "Bonjour",
  ja: "おはようございます",
};

const Widget = () => {
  const language = usePreferredLanguage();

  return <h1>{GREETINGS[language] ?? GREETINGS.en}</h1>;
};